import Search from "@/components/public/Search";
import { View, Text, Image, Switch } from "@tarojs/components";
import ico_lxr from "@/assets/image/ico_lxr.svg";
import ico_edt_two from "@/assets/image/ico_edt_two.svg";
import ico_del_two from "@/assets/image/ico_del_two.svg";
import arrayIcon from "@/assets/image/ico_jiantou_one.svg";
import ico_xinz from "@/assets/image/ico_xinz.svg";
import clsx from "clsx";
import "./index.scss";
import { useEffect, useRef, useState } from "react";
import { getLevelName, linkWithParams } from "@/helper/utils";
import { routes } from "@/constants/routes";
import { useDidShow, useReachBottom } from "@tarojs/taro";
import { getStore, storeDelete, storeDisable } from "@/services/entities/all";
import Taro from "@tarojs/taro";
const ShopManage = () => {
  const [page, setPage] = useState(1);
  const [list, setList] = useState<any>([]);
  const [title, setTitle] = useState("");
  const [currentIndex, setCurrentIndex] = useState(0);
  const currentStateRef = useRef<any>(void 0);

  const tabs = [
    { name: "全部", tabId: void 0 },
    { name: "未审核", tabId: false },
  ];

  const getList = (pageNum) => {
    getStore({
      currentPage: page,
      pageSize: 10,
      name: title,
      enable: currentStateRef.current,
    }).then((res: any) => {
      if (pageNum === 1) {
        setList(res.records);
      } else {
        setList((old) => {
          return [...old, ...res.records];
        });
      }
    });
  };

  const deleteStore = (id: any, index: number) => {
    Taro.showModal({
      title: "提示",
      content: "是否删除当前商家",
      success: (res) => {
        if (res.confirm) {
          storeDelete({ id: id }).then(() => {
            const tmp = [...list];
            tmp.splice(index, 1);
            setList(tmp);
          });
        }
      },
    });
  };

  useReachBottom(() => {
    if (page * 10 === list.length) {
      setPage((old) => old + 1);
    }
  });

  const getFirstPage = () => {
    if (page === 1) {
      getList(1);
    } else {
      setPage(1);
    }
  };

  useDidShow(() => {
    getFirstPage()
  });

  useEffect(() => {
    getList(page);
  }, [page]);

  const handleSwitch = (e, id, index) => {
    storeDisable({ id: id }).then(() => {
      const arr = [...list];
      arr[index].enable = e.detail.value;
      setList(arr);
    });
  };

  return (
    <View className="shop-manage-container bg-page pb-92 border-box">
      <View className="dis-flex bg-ffffff pd-16 border-box">
        <Search
          value={title}
          onInput={(value) => {
            setTitle(value);
          }}
          className="bg-ffffff width-full"
          right={
            <View
              className="bg-394B5D cl-white fs-28 lh-38 pd-tb-8 border-box pd-lr-38 br-28 mr-4"
              onClick={() => {
                getFirstPage()
              }}
            >
              搜索
            </View>
          }
        />
      </View>
      <View className="mg-lr-94 mt-20 dis-flex align-center br-32 bg-007DDB pd-4 border-box ml-12">
        {tabs?.map((item, index) => {
          return (
            <View
              onClick={() => {
                currentStateRef.current = tabs[index].tabId;
                getFirstPage()
                setCurrentIndex(index);
              }}
              key={index}
              className={clsx(
                "pd-tb-10 border-box br-28 fs-26 lh-36 cl-white flex-1 flex-center",
                currentIndex == index ? "bg-ffffff cl-black" : ""
              )}
            >
              {item.name}
            </View>
          );
        })}
      </View>
      <View className="flex-column pd-lr-16 pb-16 border-box">
        {list.map((item, index) => {
          return (
            <View className="mt-16 bg-ffffff br-8 flex-column" key={index}>
              <View>
                <Text
                  className={clsx(
                    "top-left flex-center pd-lr-16 pd-tb-4 border-box inline-flex fs-20 lh-32",
                    item.enable ? "bg-EEF6FE cl-007DDB" : "bg-FCEAEA cl-E14848"
                  )}
                >
                  {item.enable ? "已启用" : "已关闭"}
                </Text>
              </View>
              <View className="flex-column pd-lr-24 pt-16 pb-28 border-box">
                <View className="dis-flex justify-between">
                  <View className="dis-flex align-center">
                    <Text className="cl-848484 fs-30 lh-40">{item.name}</Text>
                    <Text className="ml-8 bg-4EBE6F br-16 pd-lr-16 pd-tb-2 border-box fs-20 lh-28 cl-white">
                      {getLevelName(item.level)}
                    </Text>
                  </View>
                  <Switch
                    className="switch"
                    onChange={(e) => {
                      handleSwitch(e, item.id, index);
                    }}
                    checked={item.enable}
                  />
                </View>
                <View className="mt-20 cl-848484 fs-24 lh-32">
                  {item.shopScope}
                </View>
                <View className="dis-flex align-center justify-between mt-32">
                  <View className="dis-flex align-center">
                    <Image src={ico_lxr} className="avatar" />
                    <Text className="ml-12 cl-007DDB fs-24 lh-32">
                      {item.userName}
                    </Text>
                    <View className="line ml-20"></View>
                    <Text className="ml-20 cl-007DDB fs-24 lh-32">
                      {item.phone}
                    </Text>
                  </View>
                  <View
                    className="dis-flex align-center"
                    onClick={() => {
                      linkWithParams(routes.ROUTES_ADD_SHOP, {
                        type: 3,
                        id: item.id,
                      });
                    }}
                  >
                    <Text className="cl-848484 fs-24 lh-32">查看详情</Text>
                    <Image src={arrayIcon} className="avatar" />
                  </View>
                </View>
                {!item.enable && (
                  <View className="mt-28 border-top dis-flex align-center pt-22 border-box">
                    <View className="flex-1"></View>
                    <View
                      className="flex-center flex-2"
                      onClick={() => {
                        linkWithParams(routes.ROUTES_ADD_SHOP, {
                          type: 2,
                          id: item.id,
                        });
                      }}
                    >
                      <Image className="handle-btn" src={ico_edt_two} />
                      <Text className="ml-8 fs-24 lh-36 cl-black">修改</Text>
                    </View>
                    <View
                      className="flex-center flex-2"
                      onClick={() => {
                        deleteStore(item.id, index);
                      }}
                    >
                      <Image className="handle-btn" src={ico_del_two} />
                      <Text className="ml-8 fs-24 lh-36 cl-red">删除</Text>
                    </View>
                    <View className="flex-1"></View>
                  </View>
                )}
              </View>
            </View>
          );
        })}
      </View>
      <View className="bottom flex-center bg-ffffff">
        <View
          className="dis-flex align-center"
          onClick={() => {
            linkWithParams(routes.ROUTES_ADD_SHOP, { type: 1 });
          }}
        >
          <Image src={ico_xinz} className="handle-btn" />
          <Text className="ml-12 fs-28 lh-38 cl-black">新增</Text>
        </View>
      </View>
    </View>
  );
};

export default ShopManage;
